<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-02-10 16:26:27
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-02-10 16:27:55
-->
<template>
  <div class="Main">
    <div class="MainTitle">商品列表</div>
    <div class="MianContent">
      <div class="MainTopAction" style="display:flex;justify-content: space-between;">
        <div class="MainTopActionOne flex">
          <a-button style="margin-right:20px;" type="primary" size="large" @click="toAddGoods" icon="plus"
            >新增{{current==1?'医药商品':'普通商品'}}</a-button
          >
          <div v-if="current == 1">
            药监类目：
            <el-select v-model="drug_type" @change="selectDrugType" clearable placeholder="请选择药品类型">
              <el-option
                v-for="item in drugTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display:flex;">
          <el-input placeholder="输入商品信息模糊搜索" v-model="keyword" @input="clearFn" @keyup.enter.native="searchList" clearable ></el-input>
          <el-button style="margin-left:10px;" type="primary" @click="searchList">搜索</el-button>
        </div>
      </div>
      <a-tabs v-model="current" @change="selectTabs">
        <!-- <a-tab-pane key="1" tab="医药商品"></a-tab-pane> -->
        <a-tab-pane key="2" tab="普通商品"></a-tab-pane>
        <!-- <a-tab-pane key="3" tab="易享农供应商品"></a-tab-pane> -->
      </a-tabs>
      <div>
        <a-table
          :columns="listfields"
          :data-source="listData"
          :bordered="true"
          :pagination="false"
        >
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="action" slot-scope="row, index">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 6px;
              "
            >
              <el-button type="primary" size="mini" @click="EditItem(index.id)"
                >编辑</el-button
              >
              <el-button :type="index.status==1?'danger':'primary'" size="mini" @click="EditStatus(index)"
                >{{index.status==1?'下架':'上架'}}</el-button
              >
              <el-button v-if="current == 2" type="primary" size="mini" @click="openCredit(index)"
                >积分商品</el-button
              >
              <!-- <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteItem(index)">
                  <template slot="title">
                      <p>警告</p>
                      <p>此操作将永久删除该文件, 是否继续?</p>
                  </template>
                  <a-button type="danger" size="small">删除</a-button>
              </a-popconfirm> -->
            </div>
          </div>
          <div slot="logo" slot-scope="row, index">
            <div @click="ClickLookImage(row)" v-if="row">
              <img :src="row[0]" style="width: 50px; height: 50px" />
            </div>
          </div>
          <div slot="image" slot-scope="row, index">
            <div @click="ClickLookImage(row)" v-if="row">
              <img :src="row[0]" style="width: 50px; height: 50px" />
            </div>
          </div>
          <div slot="status" slot-scope="row, index">
            {{ row == 1 ? "上架" : "下架" }}
          </div>
          <div slot="cate" slot-scope="row, index">
            {{ row ? row : index.cate_pid }}
          </div>
          <div slot="drug_type" slot-scope="row, index">
            {{
              row == 1
                ? "普通药品"
                : row == 2
                ? "保健品"
                : row == 3
                ? "医疗器械"
                : row == 4
                ? "中药类"
                : ""
            }}
          </div>
          <div slot="sort" slot-scope="row, index">
            <div>
              <a-input style="width: 100px;" v-model="index.sort" @blur="changeSort(index)"></a-input>
            </div>
          </div>
        </a-table>
        <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
        ></Pagination>
      </div>
    </div>
    <a-modal v-model="LookImages" :footer="null" centered>
      <div style="margin: 10px">
        <!-- <img :src="SelectImg" style="width: 100%;height: 100%;"> -->
        <a-carousel arrows :dots="false">
          <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px; zindex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div
            slot="nextArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="right: 10px; zindex: 1"
          >
            <a-icon type="right-circle" />
          </div>
          <div
            style="overflow: hidden"
            v-for="(item, index) in SelectImg"
            :key="index"
          >
            <img style="width: 100%; height: 100%" :src="item" alt="" />
          </div>
        </a-carousel>
      </div>
    </a-modal>

    <a-modal title="积分商品" v-model="visibleSend" :width="620" :centered="true" :maskClosable="false" @ok="handleOkSend" @cancel="handleCancelSend">
        <div style="padding-left: 10px;">
          <a-form-model ref="ruleFormOne" :model="formOne" :rules="rulesOne" :label-col="labelColOne" :wrapper-col="wrapperColOne">
            <a-form-model-item label="是否积分商品" prop="is_credit">
                <a-radio-group v-model="formOne.is_credit">
                  <a-radio :value="0">否</a-radio>
                  <a-radio :value="1">是</a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="是否积分商城" prop="is_credit_mall">
                <a-radio-group v-model="formOne.is_credit_mall">
                  <a-radio :value="0">否</a-radio>
                  <a-radio :value="1">是</a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="积分" prop="credit">
                <a-input v-model="formOne.credit" type="number" placeholder="请输入积分"></a-input>
            </a-form-model-item>
            <a-form-model-item label="积分价" prop="credit_price">
                <a-input v-model="formOne.credit_price" type="number" placeholder="请输入积分价"></a-input>
            </a-form-model-item>
            <a-form-model-item label="积分商品库存" prop="credit_stock_num">
                <a-input v-model="formOne.credit_stock_num" type="number" placeholder="请输入积分商品库存"></a-input>
            </a-form-model-item>
          </a-form-model>
        </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue';
import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import { yxnShopGoodsList, yxnShopGoodsEditStatus, GetCateList, SetCredit, yxnSetProductSort, SetPointsProduct } from "@/api/api.js";

export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      currentPage: 1, //当前页码
      total: 0, //定义初始有多少条数据
      keyword: "",
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      listData: [], //表格数据
      MadalTitle: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false, //modal显示隐藏
      EditId: null, //选择编辑存储的id
      LookImages: false, //查看图片的modal显示隐藏
      SelectImg: "", //选择的图片链接
      
      drug_type:'', //选择的类目
      drugTypeList:[{
        name:'普通药品',
        value:1
      },{
        name:'保健品',
        value:2
      },{
        name:'医疗器械',
        value:3
      },{
        name:'中医类',
        value:4
      }],
      current:'2', //tabs

      visibleSend:false,
      labelColOne: { span: 4 },
      wrapperColOne: { span: 20 },
      formOne:{
        is_credit:0,
        is_credit_mall:0,
        credit:'',
        credit_price:''
      },
      rulesOne:{
        credit: [{ required: true, message: '请输入积分', trigger: 'blur' } ],
        credit_price: [{ required: true, message: '请输入积分价', trigger: 'blur' } ],
        credit_stock_num: [{ required: true, message: '请输入积分商品库存', trigger: 'blur' } ],
      },
      shopInfo:{}, //选择要设置的积分商品
    };
  },
  computed: {
    ...mapState({
      listfields: (state) => state.Shop.fields, //获取table头
    }),
  },
  created() {},
  mounted() {
    this.GetFields('product');
    this.GetList();
  },
  methods: {
    ...mapActions({
      GetFields: "Shop/GetFields", //获取table头
    }),

    // 修改排序
    async changeSort(row){
      const that = this;
      // let sort = {[`${row.id}`]:row.sort}
      // sort = JSON.stringify(sort)
      let params = {
        id:row.id,
        sort:row.sort
      }
      let res = await yxnSetProductSort(params)
      if(res.data.code == 1){
        showSuccess('修改成功')
        that.GetList()
      }else{
        showError(res.data.msg)
      }
    },

    // 积分商品按钮
    openCredit(item){
      const that = this;
      that.visibleSend = true;
      that.shopInfo = item;
      that.formOne.is_credit = item.is_credit;
      that.formOne.is_credit_mall = item.is_credit_mall;
      that.formOne.credit = item.credit;
      that.formOne.credit_price = item.credit_price
      that.formOne.credit_stock_num = item.credit_stock_num
    },
    // 积分商品弹出确定
    async handleOkSend(){
      const that = this;
      that.$refs["ruleFormOne"].validate(async (valid) => {
        console.log(valid);
        if(valid){
          let params = {
            product_id:that.shopInfo.id,
            is_credit:that.formOne.is_credit,
            is_credit_mall:that.formOne.is_credit_mall,
            credit:that.formOne.credit,
            credit_price:that.formOne.credit_price,
            credit_stock_num:that.formOne.credit_stock_num
          }
          let res = await SetPointsProduct(params)
          if(res.data.code == 1){
            showSuccess('保存成功！')
            that.visibleSend = false;
            that.$refs.ruleFormOne.resetFields();
            that.GetList()
          }else{
            showError(res.data.msg)
          }
        }
      })
    },
    // 积分商品弹出取消
    handleCancelSend(){
      const that = this;
      that.shopInfo = {};
      that.formOne.is_credit = 0
      that.formOne.is_credit_mall = 0
      that.formOne.credit = ''
      that.formOne.credit_price = ''
      that.formOne.credit_stock_num = ''
    },

    // 选择tabs
    selectTabs(){
      const that = this;
      if(that.current == 1){
        this.GetFields();
      }else{
        this.GetFields('product');
      }
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    // 获取分类列表
    GetCateList(){

    },

    // 选择药监类目
    selectDrugType(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    // 搜索按钮
    searchList(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },
    // 清空输入框
    clearFn(){
      const that = this;
      if(!that.keyword){
        that.pageno = 1;
        that.pagesize = 10;
        that.GetList()
      }
    },

    // 查看图片
    ClickLookImage(row) {
      this.SelectImg = row;
      this.LookImages = true;
    },
    // 获取数据列表API
    async GetList() {
      var that = this;
      const user = Vue.ls.get(USER_DATA);
      let params = {
        keyword: that.keyword,
        store_id:user.identityId,
        page: that.pageno,
        pagesize: that.pagesize,
        // drug_type:that.drug_type,
        // type:that.current
      };
      const res = await yxnShopGoodsList(params);
      if (res.data.code == "1") {
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.indexNum = index
            item.key = item.id;
            item.logo = item.logo.split(",");
            item.create_time = that
              .$moment(item.create_time * 1000)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    // 新增按钮
    toAddGoods() {
      const that = this;
      if(that.current == 1){
        that.$router.push({ name: "goodsDetails", query: {} });
      }else{
        that.$router.push({ name:'productDetails', query: {}})
      }
       
    },
    // 编辑按钮
    EditItem(id) {
      const that = this;
      if(that.current == 1){ //医药商品
        that.$router.push({ name: "goodsDetails", query: { id } });
      }else{
        that.$router.push({ name: "productDetails", query: { id } });
      }
    },
    // 更改状态
    async EditStatus(row){
      const that = this;
      let params = {
        id:row.id,
        status:row.status==0?1:0
      }
      let res = await yxnShopGoodsEditStatus(params)
      if(res.data.code == 1){
        showSuccess('操作成功')
        that.GetList()
      }else{
        showError(res.data.msg)
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
    // 返回
    backBtn() {
      this.$router.back(1);
    },
  },
};
</script>

<style scoped lang="less">
.editable-row-operations a {
  margin-right: 12px;
}

.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(0, 158, 238, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .MainTopActionOne {
          margin-right: 30px;

          span {
            margin-right: 20px;
          }
        }

        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }

      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .custom-slick-arrow {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.4;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.6;
}

// .ant-carousel .slick-slide h3 {
//   color: #fff;
// }
.ant-carousel .slick-dots li button {
  background: #009eee;
  
}
.ant-carousel .slick-dots li.slick-active button {
  background: #009eee;
}
</style>